<template>
  <div class="app-container search-list reviews-list">
    <div class="header">
      <div class="head_left"><p class="title">商品评论</p><span class="desc"></span></div>
      <i class="el-icon-setting" @click="handleSetting"></i>
    </div>
    <div v-if="isOpenedReviews">
      <el-row style="padding: 20px; background-color: #FFFFFF; margin-bottom: 20px;">
        <el-col :span="12">
          <el-radio-group v-model="actionType" @change="changeActionType">
            <el-radio-button label="spu">全部商品</el-radio-button>
            <el-radio-button label="reviews">全部评论</el-radio-button>
          </el-radio-group>
        </el-col>
      </el-row>
      <table-pagination
          v-if="showTable"
          :showOperatingButton="true"
          size="small"
          style="position: relative;z-index: 9"
          ref="el-search-table"
          :fetch="getData"
          type="remote"
          :adaptive="fixOption"
          height="300"
          :page-sizes="[20, 50, 100]"
          :columns="columns"
          :form-options="formOptions"
          list-field="records"
          total-field="totalElements"
          page-index-key="page"
          page-size-key="pageSize"
          :autoHeight="true"
          method="get"
          @selection-change="handleSelectionChange">
        <template slot="button">
          <el-button type="danger" size="mini" v-if="actionType==='reviews'&&selectedIdList.length>0 "
                     @click="batchDelete()">批量删除
          </el-button>
          <el-button type="primary" size="mini" v-if="actionType==='reviews'&&selectedIdList.length>0 "
                     @click="batchPublish()">批量发布
          </el-button>
          <el-button type="primary" size="mini" v-if="actionType==='reviews'&&selectedIdList.length>0 "
                     @click="batchUnPublish()">批量取消发布
          </el-button>
          <el-button type="primary" size="mini" v-if="actionType==='reviews'&&selectedIdList.length>0 "
                     @click="setStar=true">批量评分
          </el-button>
          <el-button type="primary" size="mini" @click="settingVisible = true" :loading="submitLoading" v-if="actionType==='reviews'">
                 {{submitLoading ? '导出中': '导出评论'}}
          </el-button>
          <upload-file
              :headers="headers"
              style="margin-left: 10px;margin-right: 10px"
              :fileType="['doc', 'pdf']"
              type="file"
              :drag="true"
              show-text="导入评论"
              :showFileList="true"
              accept=".xlsx"
              :isShowTip="true"
              :lazy="true"
              :responseFn="handleResponses"
              :action="uploadPaths"
              title="选择文件"
              v-model="importProductsFileName"
          ></upload-file>
          <el-button type="default" size="mini"  @click="handleDown()">评论导入模板下载</el-button>
        </template>
        <template slot-scope="scope" slot="image">
          <el-image
              slot="reference"
              style="width: 40px; height: 60px;cursor: pointer;"
              v-img-host="{url: scope.row.image}" :src="bgPic"
              :preview-src-list="[scope.row.image]"
              fit="contain"></el-image>
        </template>
        <template slot-scope="scope" slot="images">
          <el-image v-if="scope.row.firstReviewsImage"
              slot="reference"
              style="width: 80px; height: 60px;cursor: pointer;"
              v-img-host="{url: scope.row.firstReviewsImage}" :src="bgPic"
              :preview-src-list="scope.row.imageList"
              fit="contain"></el-image>
        </template>
        <template slot-scope="scope" slot="reviews">
          <el-rate disabled v-model="scope.row.star"></el-rate>
          已发布/未发布：{{ scope.row.published }}/{{ scope.row.unPublished }}
        </template>
        <template slot-scope="scope" slot="spuName">
          <a style="color: #1A89FF" @click="handleDetail(scope.row.spuId)">{{ scope.row.spuName }}</a>
        </template>
        <template slot-scope="scope" slot="spuNames">
          <a style="color: #1A89FF" @click="handleDetail(scope.row.id)">{{ scope.row.name}}</a>
        </template>
        <template slot-scope="scope" slot="star">
          <el-rate disabled v-model="scope.row.star"></el-rate>
        </template>
        <template slot-scope="scope" slot="spuOperations">
          <el-button size="mini" type="primary" @click="handlePreview(scope.row)" plain>预览</el-button>
          <el-button size="mini" type="primary" @click="openCommentDialog(scope.row.id)" plain>添加评论</el-button>
        </template>
        <template slot-scope="scope" slot="reviewsOperations">
          <el-button plain size="mini" type="primary" @click="openEditDialog(scope.row)">修改</el-button>
          <el-button plain size="mini" type="primary" v-if="scope.row.status===1"
                     @click="unPublishReviews(scope.row.id)">隐藏
          </el-button>
          <el-button plain size="mini" type="primary" v-if="scope.row.status===0" @click="publishReviews(scope.row.id)">
            发布
          </el-button>
          <el-button plain size="mini" type="danger" @click="deleteReviews(scope.row.id)">删除</el-button>
        </template>
      </table-pagination>
    </div>
    <empty description="暂无评论" v-if="!loading && !isOpenedReviews" style="padding: 30px 0;background: #fff">
      <div class="table_null_p">评论功能尚未开启</div>
      <div class="table_null_desc">获得好评的商品，会更加吸引你的顾客去购买</div>
      <el-button type="primary" size="small" @click="handleSetting">立刻开启</el-button>
    </empty>
    <el-dialog :visible.sync="settingVisible" title="评论导出" width="400px">
      <div class="desc">
        <div class="export" style="text-align: left;">
          <section>
            <div class="orca-row orca-form-item">
              <el-radio v-model="exportType" label="all" style="margin-bottom: 15px">所有评论</el-radio>
              <el-radio v-model="exportType" label="filter">当前选择的商品评论</el-radio>
            </div>
          </section>
        </div>
        <div style="margin-top: 20px">
          <el-button type="primary" @click="handleExport" :loading="submitLoading">
            {{ submitLoading ? '导出中' : '导出' }}
          </el-button>
          <el-button @click="settingVisible = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="评论" :visible.sync="commentDialogVisible" width="1000px" center>
      <el-form ref="commentForm" :model="reviews" label-width="100px" label-position="top" style="text-align: left; max-height: 700px; overflow-y: scroll;">
        <template v-for="(item, index) in reviews.comment">
          <div :key="index" class="reviewsList_item">
            <h5>{{ index + 1 }} <i style="margin-left: 12px;font-size: 16px;color: 333" class="el-icon-delete"
                                   @click="handleRemoveLevel(index)" v-if="reviews.comment.length > 1"></i></h5>
            <div class="marketing-row-conditions">
              <el-row>
                <el-col :span="8">
                  <el-form-item class="item" :prop="'comment.' + index + '.star'" label="评论分数"
                                :rules="[{required: true, message: '内容不能为空', trigger: 'blur'}]">
                    <el-rate v-model="item.star"
                             :colors="['rgb(244, 90, 25)', 'rgb(244, 90, 25)', 'rgb(244, 90, 25)']"
                             :allow-half="false"
                             show-score
                             text-color="rgb(244, 90, 25)"
                             score-template="{value}"
                             style="margin-top: 10px"
                    >
                    </el-rate>
                  </el-form-item>
                </el-col>
                <el-col :span="8"  v-if="commentDialogVisible">
                  <el-form-item label="评论日期" class="item" :prop="'comment.' + index + '.commentTime'"
                                :rules="[{required: true, message: '请选择日期', trigger: 'blur'}]">
                    <el-date-picker
                        v-model="item.commentTime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetime"
                        placeholder="选择日期时间"
                        style="width:260px"/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="评论人" class="item" :prop="'comment.' + index + '.memberName'"
                                :rules="[{required: true, message: '内容不能为空', trigger: 'blur'}]">
                    <el-input v-model="item.memberName" placeholder="请输入评论人" style="width:260px"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="18">
                  <el-form-item label="评论内容" class="item" :prop="'comment.' + index + '.content'"
                                :rules="[{required: true, message: '内容不能为空', trigger: 'blur'}]">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 4, maxRows: 6}"
                        placeholder="请输入内容"
                        v-model="item.content"
                        style="width:670px"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="评论图片" class="item">
                <upload-file accept="image/jpeg,image/jpg,image/png"
                             ref="uploadAdd"
                             :multiple="true"
                             :limit="5"
                             :fileType="['png', 'jpg', 'jpeg']"
                             :isShowTip="true"
                             :lazy="true"
                             :size="120"
                             :responseFn="handleResponse"
                             :action="uploadPath"
                             title="图片"
                             v-model="item.images"
                >
                </upload-file>
                <p>最多上传五张评论图片</p>
              </el-form-item>
              <div class="btn_line">
                <el-button @click="handleAddComment">添加评论</el-button>
              </div>
            </div>
          </div>
        </template>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="commentDialogVisible = false">取 消</el-button>
      <el-button type="primary" :loading="submitLoading" @click="handleSaveComment('commentForm')">确 定</el-button>
    </span>
    </el-dialog>

    <el-dialog title="编辑评论" :visible.sync="updateCommentDialogVisible" width="1000px" center>
      <el-form ref="updateCommentForm" :model="updateReviews" label-width="100px" label-position="top">
        <div class="marketing-row-conditions">
          <el-row>
            <el-col :span="8">
              <el-form-item class="item" prop="star" label="评论分数"
                            :rules="[{required: true, message: '内容不能为空', trigger: 'blur'}]">
                <el-rate v-model="updateReviews.star"
                         :colors="['rgb(244, 90, 25)', 'rgb(244, 90, 25)', 'rgb(244, 90, 25)']"
                         :allow-half="false"
                         show-score
                         text-color="rgb(244, 90, 25)"
                         score-template="{value}"
                         style="margin-top: 10px"
                >
                </el-rate>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="评论日期" class="item" prop="commentTime"
                            :rules="[{required: true, message: '请选择日期', trigger: 'blur'}]">
                <el-date-picker
                    v-model="updateReviews.commentTime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期时间"
                    style="width:260px"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="评论人" class="item" prop="memberName"
                            :rules="[{required: true, message: '内容不能为空', trigger: 'blur'}]">
                <el-input v-model="updateReviews.memberName" placeholder="请输入评论人" style="width:260px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="评论内容" class="item" prop="content"
                            :rules="[{required: true, message: '内容不能为空', trigger: 'blur'}]">
                <el-input
                    type="textarea"
                    :autosize="{ minRows: 4, maxRows: 6}"
                    placeholder="请输入内容"
                    v-model="updateReviews.content"
                    style="width:670px"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="评论图片" class="item">
            <upload-file accept="image/jpeg,image/jpg,image/png"
                         ref="uploadEdit"
                         :multiple="true"
                         :limit="5"
                         :fileType="['png', 'jpg', 'jpeg']"
                         :isShowTip="true"
                         :lazy="true"
                         :size="120"
                         :responseFn="handleResponse"
                         :action="uploadPath"
                         title="图片"
                         v-model="updateReviews.images"
            >
            </upload-file>
            <p>最多上传五张评论图片</p>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="updateCommentDialogVisible = false">取 消</el-button>
      <el-button type="primary" :loading="submitLoading"
                 @click="handleUpdateComment('updateCommentForm')">确 定</el-button>
    </span>
    </el-dialog>

    <el-dialog title="批量评分" :visible.sync="setStar" width="30%" center>
      <div class="domain-text">请对选中的评论设置评分</div>
      <div class="radio-text">
        <el-rate v-model="star"
                 :colors="['rgb(244, 90, 25)', 'rgb(244, 90, 25)', 'rgb(244, 90, 25)']"
                 :allow-half="false"
                 show-score
                 text-color="rgb(244, 90, 25)"
                 score-template="{value}"
                 style="height: 40px;margin-top: 10px;"
        >

        </el-rate>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button @click="setStar = false">取 消</el-button>
      <el-button type="primary" @click="batchStar()">确 定</el-button>
    </span>
    </el-dialog>
  </div>

</template>

<script>
import bgPic from '@/assets/images/bg-grey.png';
import TablePagination from '_c/Tables/table-pagination';
import {getSeriesList} from '@/api/goods';
import {getSpuPage, addSpuReviews, getReviewsPage,
    deleteReviews, publishReviews, unPublishReviews,
    starReviews, updateSpuReviews, getReviewsSetting} from '@/api/reviews';
import {mapGetters} from 'vuex';
import uploadFile from '_c/Upload/uploadFile';
import {utcFormat} from '@/utils/filters';
import {getToken} from '@/utils/auth';
import axios from 'axios';

export default {
    name: 'reviews-list',
    components: {TablePagination, uploadFile},
    data () {
        return {
            exportType: 'all',
            settingVisible: false,
            importProductsFileName: '',
            headers: { 'X-TULIANG-Session-Token': getToken() },
            loading: true,
            bgPic,
            isOpenedReviews: false,
            showTable: true,
            actionType: 'spu',
            submitLoading: false,
            commentDialogVisible: false,
            updateCommentDialogVisible: false,
            fixOption: {fixedHeader: true, bottomOffset: 80},
            setStar: false,
            spuColumns: [
                {
                    label: '商品名称',
                    prop: 'name',
                    slotName: 'spuNames',
                    showOverflowTooltip: true
                },
                {label: '图片', prop: 'image', slotName: 'image', width: 200},
                {
                    label: '商品评论',
                    prop: 'reviews',
                    slotName: 'reviews',
                    showOverflowTooltip: true
                },
                {label: '操作', slotName: 'spuOperations', width: 200}
            ],
            reviewsColumns: [
                {label: '', type: 'selection'},
                {
                    label: '商品名称',
                    prop: 'spuName',
                    slotName: 'spuName',
                    showOverflowTooltip: true
                },
                {label: '商品图片', prop: 'image', slotName: 'image'},

                {
                    label: '评论星级',
                    prop: 'star',
                    slotName: 'star'
                },
                {
                    label: '评论内容',
                    prop: 'content',
                    showOverflowTooltip: true
                },
                {label: '评论图片', prop: 'images', slotName: 'images'},
                {
                    label: '评论状态',
                    prop: 'status',
                    render: row => {
                        let status = row.status;
                        if (status === 1) {
                            return '已发布';
                        } else {
                            return '未发布';
                        }
                    }

                },
                {
                    label: '评论人',
                    prop: 'memberName'
                },
                {
                    label: '评论时间',
                    prop: 'commentTime',
                    render: row => {
                        return utcFormat(row.commentTime, 'YYYY-MM-DD HH:mm:ss', this.timeZone);
                    },
                    width: '180px'
                },
                {label: '操作', slotName: 'reviewsOperations', width: 250}
            ],
            columns: [],
            tableData: [],
            selectedList: [],
            selectedIdList: [],
            pageParams: {
                page: 1,
                pageSize: 20,
                searchText: '',
                spuSeries: [],
                stars: [],
                content: ''
            },
            spuId: '',
            star: 5,
            updateReviews: {
                id: '',
                content: '',
                commentTime: '',
                images: [],
                star: '',
                memberName: ''
            },
            reviews: {
                comment: [
                    {
                        siteId: '',
                        spuId: '',
                        content: '',
                        commentTime: '',
                        images: [],
                        star: 5,
                        memberName: '',
                        status: ''
                    }
                ]
            },
            formOptions: {
                showResetBtn: true,
                showSearchBtn: true,
                inline: false,
                labelWidth: 120,
                submitBtnText: '查询',
                size: 'small',
                resetBtnCallback: () => {
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                },
                forms: [

                ]
            },
            spuForms: [
                {prop: 'searchText', label: '搜索：', placeholder: '商品名称/编码/标签'},
                {
                    prop: 'spuSeries',
                    label: '产品系列：',
                    itemType: 'select',
                    placeholder: '请选择产品系列',
                    multiple: true,
                    selectFetch: () => {
                        return new Promise((resolve, reject) => {
                            this.$nextTick(() => {
                                let siteId = this.siteId;
                                getSeriesList({'siteId': siteId}).then(res => {
                                    let records = res.data;
                                    if (records == null || records.length <= 0) {
                                        this.seriesList = [];
                                    }
                                    let tempList = [];
                                    records.forEach(item => {
                                        tempList.push({'label': item.label, 'value': item.value});
                                    });
                                    resolve(tempList);
                                });
                            });
                        });
                    }
                }
            ],
            reviewsForms: [
                {prop: 'content', label: '内容', placeholder: '评论内容'},
                {
                    prop: 'stars',
                    label: '评分',
                    itemType: 'select',
                    placeholder: '请选择评分',
                    multiple: true,
                    options: [
                        // {value: '', label: '全部评分'},
                        {value: 1, label: '1星'},
                        {value: 2, label: '2星'},
                        {value: 3, label: '3星'},
                        {value: 4, label: '4星'},
                        {value: 5, label: '5星'}
                    ]
                }
            ]
        };
    },
    computed: {
        ...mapGetters(['timeZone', 'siteList']),
        siteId () {
            return this.$store.state.user.siteId;
        },
        siteInfo () {
            let info = this.siteList.find(res => res.id === Number(this.siteId));
            return info;
        },
        uploadPath () {
            return process.env.VUE_APP_BASE_API + '/upload-file?siteId=' + this.siteId;
        },
        uploadPaths () {
            return process.env.VUE_APP_BASE_API + '/reviews/import?siteId=' + this.siteId;
        },
        exportPath () {
            return `${process.env.VUE_APP_BASE_API}/reviews/export`;
        }
    },
    mounted () {
        this.getSiteReviewsSetting();
    },
    methods: {
        handlePreview (item) {
            let url = 'https://' + this.siteInfo.domainName + `/products/${item.name.replace(/(^\s*)|(\s*$)/g, '').replace(/\s+/g, '-')}`;
            window.open(url, '_blank');
        },
        getSiteReviewsSetting () {
            getReviewsSetting(this.siteId).then((res) => {
                this.isOpenedReviews = res.data && res.data.enable;
                this.loading = res.data && res.data.enable;
            });
        },
        handleDetail (id) {
            this.$router.push({name: 'reviews-detail', params: {id}});
        },
        handleSelectionChange (records) {
            if (records && records.length > 0) {
                let tempIdList = [];
                records.forEach(item => {
                    tempIdList.push(item.id);
                });
                this.selectedIdList = tempIdList;
                this.selectedList = records;
            } else {
                this.selectedIdList = [];
                this.selectedList = [];
            }
        },
        deleteReviews (id) {
            this.$confirm('确认删除这条评论?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteReviews({siteId: this.siteId, ids: id}).then(res => {
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                });
            });
        },
        batchDelete () {
            this.$confirm('确认删除这些评论?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteReviews({siteId: this.siteId, ids: this.selectedIdList.join(',')}).then(res => {
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                });
            });
        },
        publishReviews (id) {
            publishReviews({siteId: this.siteId, ids: id}).then(res => {
                this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
            });
        },
        batchPublish () {
            this.$confirm('确认发布这些评论?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                publishReviews({siteId: this.siteId, ids: this.selectedIdList.join(',')}).then(res => {
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                });
            });
        },
        unPublishReviews (id) {
            unPublishReviews({siteId: this.siteId, ids: id}).then(res => {
                this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
            });
        },
        batchUnPublish () {
            this.$confirm('确认取消发布这些评论?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                unPublishReviews({siteId: this.siteId, ids: this.selectedIdList.join(',')}).then(res => {
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                });
            });
        },
        batchStar () {
            starReviews({siteId: this.siteId, star: this.star, ids: this.selectedIdList.join(',')}).then(res => {
                this.setStar = false;
                this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
            });
        },
        changeActionType () {
            this.columns = [];
            this.formOptions.forms = [];
            this.showTable = false;
            setTimeout(() => {
                this.showTable = true;
            }, 400);
        },
        handleResponse (response, file, fileList) {
            return response;
        },
        handleResponses (response, file, fileList) {
            this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
            return response;
        },
        getData (params) {
            if (this.actionType === 'spu') {
                this.columns = this.spuColumns;
                this.formOptions.forms = this.spuForms;
                return new Promise((resolve, reject) => {
                    this.pageParams.pageSize = params.pageSize;
                    let parameters = {
                        siteId: this.siteId,
                        spuSeries: params.spuSeries && params.spuSeries.join(',')
                    };
                    getSpuPage({...params, ...parameters}).then((res) => {
                        let records = res.records;
                        if (records == null || records.length === 0) {
                            resolve(res);
                            return false;
                        }
                        res.records = records;
                        this.tableData = records;
                        this.loading = false;
                        resolve(res);
                    });
                });
            } else {
                this.columns = this.reviewsColumns;
                this.formOptions.forms = this.reviewsForms;
                return new Promise((resolve, reject) => {
                    this.pageParams.pageSize = params.pageSize;
                    let parameters = {
                        siteId: this.siteId,
                        stars: params.stars && params.stars.join(',')
                    };
                    getReviewsPage({...params, ...parameters}).then((res) => {
                        let records = res.records;
                        if (records == null || records.length === 0) {
                            resolve(res);
                            return false;
                        }
                        res.records = records;
                        records.forEach(item => {
                            if (item.images) {
                                item.imageList = item.images.split(',');
                                item.firstReviewsImage = item.imageList[0];
                            }
                        });
                        this.loading = false;
                        this.tableData = records;
                        resolve(res);
                    });
                });
            }
        },
        handleSetting () {
            this.$router.push({name: 'reviews-setting'});
        },
        openCommentDialog (spuId) {
            this.reviews.comment = [];
            this.commentDialogVisible = true;
            this.spuId = spuId;
            this.handleAddComment();
        },
        openEditDialog (updateReviews) {
            this.updateReviews = {
                id: '',
                content: '',
                commentTime: '',
                images: [],
                star: '',
                memberName: ''
            };
            this.updateCommentDialogVisible = true;
            this.updateReviews = Object.assign(this.updateReviews, {
                id: updateReviews.id,
                star: updateReviews.star,
                commentTime: utcFormat(updateReviews.commentTime, 'YYYY-MM-DD HH:mm:ss', this.timeZone),
                memberName: updateReviews.memberName,
                content: updateReviews.content
            });
            if (updateReviews.images) {
                this.updateReviews.images = updateReviews.images.split(',');
            }
        },
        handleUpdateComment (name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.submitLoading = true;
                    this.updateReviews.commentTime = new Date(this.updateReviews.commentTime + ' UTC' + this.timeZone).getTime() + '';
                    if (this.updateReviews.images) {
                        this.updateReviews.images = this.updateReviews.images.join(',');
                    }
                    updateSpuReviews(this.updateReviews).then(res => {
                        if (res.code === '200') {
                            this.submitLoading = false;
                            this.$message.success('保存成功');
                            this.updateCommentDialogVisible = false;
                            this.$refs[name].resetFields();
                            this.$refs.uploadEdit.clear();
                            this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                        }
                    }).catch(() => {
                        this.submitLoading = false;
                    });
                }
            });
        },
        handleSaveComment (name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.submitLoading = true;
                    this.reviews.comment.forEach(comment => {
                        comment.commentTime = new Date(comment.commentTime + ' UTC' + this.timeZone).getTime() + '';
                        if (comment.images) {
                            comment.images = comment.images.join(',');
                        }
                    });
                    addSpuReviews(this.reviews.comment).then(res => {
                        if (res.code === '200') {
                            this.submitLoading = false;
                            this.$message.success('保存成功');
                            this.commentDialogVisible = false;
                            this.$refs[name].resetFields();
                            this.$refs.uploadAdd[0].clear();
                            this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                        }
                    }).catch(() => {
                        this.submitLoading = false;
                    });
                }
            });
        },
        handleRemoveLevel (index) {
            this.reviews.comment.splice(index, 1);
        },
        handleAddComment () {
            this.reviews.comment.push({
                siteId: this.siteId,
                spuId: this.spuId,
                status: 1,
                content: '',
                commentTime: '',
                images: '',
                star: 5,
                memberName: ''
            });
        },
        handleDown (data) {
            const link = document.createElement('a');
            link.href = 'https://cdn.shoplazzay.com/%E5%95%86%E5%93%81%E8%AF%84%E8%AE%BA%E6%A8%A1%E6%9D%BF.xlsx';
            link.download = 'ShopPlus评论导入模板.xlsx';
            link.style.display = 'none';
            document.body.appendChild(link);
            link.click();
            URL.revokeObjectURL(link.href);
            document.body.removeChild(link);
        },
        downloadURL (data) {
            const blob = new Blob([data], {type: 'application/vnd.ms-excel'});
            console.log(blob);
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = '商品评论列表' + '_' + this.siteId + '_' + new Date().getTime().toString() + (Math.random().toFixed(2) * 400 + 100).toString() + '.xlsx';
            link.style.display = 'none';
            document.body.appendChild(link);
            link.click();
            URL.revokeObjectURL(link.href);
            document.body.removeChild(link);
        },
        handleExport () {
            let params = {siteId: this.siteId};
            if (this.exportType === 'filter' && (this.selectedIdList == null || this.selectedIdList.length <= 0)) {
                this.$message.error('请先选择需要批量导出的商品评论！');
                return false;
            }
            this.submitLoading = true;
            params = this.exportType === 'all' ? params : Object.assign(params, {ids: this.selectedIdList.join(',')});
            axios({
                method: 'get',
                params,
                url: this.exportPath,
                headers: {
                    'X-TULIANG-Session-Token': getToken()
                },
                responseType: 'arraybuffer'
            }).then(res => {
                this.downloadURL(res.data);
                this.submitLoading = false;
            }).catch(() => {
                this.$message.error('导出失败！');
                this.submitLoading = false;
            });
        }
    }
};
</script>

<style scoped lang="scss">
.header {
  margin: 0;
  display: flex;
  align-items: center;

  .head_left {
    display: inline-flex;
    align-items: center;
    line-height: 30px;

    .title {
      color: #30354d;
      font-size: 20px;
      margin: 0 24px 0 0;
      padding-left: 20px;
    }

    .desc {
      font-size: 14px;
      color: #7e849c;
    }
  }
}
.table_null_p{
  padding-top: 25px;
  font-size: 18px;
  color: #30344f;
}
.table_null_desc {
  margin-top: 10px;
  font-size: 14px;
  color: #7e849c;
  margin-bottom: 20px;
}
.btn_line{
  width: 100%;
  height: 60px;
  background-color: white;
  position: absolute;
  bottom: 70px;
  left: 0px;
  padding-left: 40px;
  display: flex;
  align-items: center;
  box-shadow: inset 0 2px 2px 0px #e6e9f0;
  z-index: 100;
}
.reviewsList_item{
  border-bottom: 1px solid #d8deec;
}
</style>

<style lang="scss">
.reviews-list{
  .search-table-info-btns{
    justify-content: flex-start !important;
    align-items: start !important;
  }
}
</style>
